<template>
	<view>

		<view class="workerInfor_box">
			<view class="workerInfor_con" @click="editClick">
				<view class="workerInfor">
					<view class="workerAvatar">
						{{userInfo.name}}
					</view>
					<view class="workerName">{{userInfo.name}}</view>
					<u-icon name="edit-pen-fill" color="#B3B3B3" size="32" v-if="memberInfo.is_edit"></u-icon>
				</view>
				<!-- <view class="workerWorksite">
					<view class="worksiteName">
						{{projectDetail.name}}<text>|</text>
						<template v-if="workerDetail.work_class">
							{{workerDetail.work_class}}<text>|</text>
						</template>
						{{workerDetail.salary}}元/{{unit}}
					</view>
				</view> -->
			</view>
		</view>

		<u-gap height="20" bg-color="#F5F5F5"></u-gap>

		<!-- 默认工地 -->
		<!-- <view class="worksiteBox">
			<view class="worksiteStatistics_con">
				<view class="statisticsItem">
					<view class="statisticsLabel">总{{unit}}</view>
					<view class="statisticsMoney">
						{{memberInfo.total_num}}
						<text class="smallFont" v-if="memberInfo.overtime_hour>0">{{unit}}</text>
						<text class="smallRed" v-if="memberInfo.overtime_hour>0">{{memberInfo.overtime_hour}}h</text>
					</view>
				</view>
				<view class="statisticsItem">
					<view class="statisticsLabel">总工资</view>
					<view class="statisticsMoney">
						{{memberInfo.total_money}}
					</view>
				</view>
			</view>
			<view class="worksiteMoney_con">
				<view class="moneyItem">
					<image src="/static/img/outIcon.png" mode=""></image>
					已支付:{{memberInfo.total_borrow}}
				</view>
				<view class="moneyItem">
					<image src="/static/img//moneyIcon.png" mode=""></image>
					剩余工资:{{memberInfo.no_money}}
				</view>
			</view>
		</view> -->

		<!-- 日历 -->
		<view class="calendarBox">
			<Calendar ref="calendar" :dotList="dotList" @year="getYear" @month="getMonth" @day="getDay"
				@weekMode="getWeekMode" parent="workerDetail">
			</Calendar>
		</view>

		<!-- 记工记账 -->
		<view class="recordList_box">
			<view class="recordTit_con">{{month}} 此处数据需改接口</view>
			<view class="recordList_con">
				<view class="recordItem">
					<u-section title="点工" font-size="32" line-color="#327FE8" :right="false"></u-section>
					<view class="recordDay">{{monthRecordNum}}{{unit}}</view>
					<view class="recordMoney blue">{{monthRecordNum}}{{unit}}</view>
				</view>
				<view class="recordItem">
					<u-section title="包工" font-size="32" line-color="#327FE8" :right="false"></u-section>
					<view class="recordDay">¥{{monthRecordMoney}}</view>
					<view class="recordMoney blue">{{monthRecordNum}}{{unit}}</view>
				</view>
				<view class="recordItem">
					<u-section title="出账" font-size="32" line-color="#FFC30B" :right="false"></u-section>
					<view class="recordDay">¥{{monthRecordMoney}}</view>
					<view class="recordMoney warn">{{monthBillMoney}}</view>
				</view>
				<view class="recordItem">
					<u-section title="入账" font-size="32" line-color="#FFC30B" :right="false"></u-section>
					<view class="recordDay">¥{{monthRecordMoney}}</view>
					<view class="recordMoney warn">{{monthBillMoney}}</view>
				</view>
			</view>
			<!-- <image src="/static/images/worker/checkStamp.png" mode="" class="checkStamp"
				v-if="is_lock==1 && is_compare==0"></image> -->
		</view>
		
		
		<!-- 数据操作 -->
		<!-- is_lock==0 && is_compare==0 显示锁定
			is_lock==0 && is_compare>0 显示差异
			is_compare==-1 不显示任何按钮 -->
		<u-gap height="152" bg-color="#fff"></u-gap>
		<view class="handlePost_con handleFixed" v-if="memberInfo.is_edit">
			<button open-type="share" hover-class="none" class="completeBtn">微信对账</button>
		</view>

		<!-- 编辑弹窗 -->
		<u-popup v-model="formShow" mode="bottom" border-radius="20" closeable z-index="10000" safe-area-inset-bottom>
			<form @submit="formSubmit">
				<view class="form_box">
					<view class="formCon">
						<view class="formItem">
							<view class="label"><text>*</text>姓名</view>
							<view class="controls">
								<input class="input" type="text" name="name" :value="userInfo.name" placeholder='请输入姓名'
									placeholder-class="placeholderColor" />
							</view>
						</view>
						<view class="formItem" @click="kindshow = true">
							<view class="label"><text>*</text>工种选择</view>
							<view class="controls">
								<view class="pickerCon">
									<text v-if="kindObj.label">{{kindObj.label}}</text>
									<text class="placeholderColor" v-else>请选择工种</text>
									<u-icon name="arrow-down-fill" color="#aaa"></u-icon>
								</view>
							</view>
						</view>
						<view class="formItem">
							<view class="label"><text>*</text>电话</view>
							<view class="controls">
								<input class="input" type="number" name="mobile" v-model="userInfo.mobile"
									placeholder='请输入电话' placeholder-class="placeholderColor" maxlength="11" />
							</view>
						</view>
						<view class="formItem">
							<view class="label">工人头像</view>
							<view class="uploadList" @click="openUpload()">
								<u-avatar :src="avatarUrl" mode="square" size="large"></u-avatar>
							</view>
						</view>
					</view>
				</view>

				<!-- 底部操作 -->
				<view class="handlePost_con">
					<button class="completeBtn" form-type="submit" hover-class="none">提 交</button>
				</view>
				<!-- <view class="formPost_con">
					<button form-type="submit" hover-class="none" class="submitBtn">提交</button>
				</view> -->
			</form>
		</u-popup>

		<!-- 上传图片组件 -->
		<Upload v-if="isUpload" @getImgs="getImgsFunc"></Upload>

		<!-- 工种选择 -->
		<u-select v-model="kindshow" mode="mutil-column-auto" :list="kindList" label-name="name" value-name="id"
			child-name="child" @confirm="kindConfirm"></u-select>

	</view>
</template>

<script>
	import Calendar from "@/components/calendar/calendar.vue"
	import Upload from '@/components/upload/upload.vue';

	export default {
		components: {
			Calendar,
			Upload
		},
		data() {
			return {
				// 默认工地信息
				defaultWorksite: JSON.parse(uni.getStorageSync('defaultWorksite')),

				// 工人详情
				id: '',
				workerDetail: {},
				userInfo: {},

				// 工资统计
				memberInfo: {
					total_money: 0,
					no_money: 0,
					total_borrow: 0,
					total_num: 0,
				},

				/**
				 * 日历
				 */
				currentYear: '', // 年
				currentMonth: '', // 月
				currentDay: '', // 日
				weekMode: '', // 模式
				dotList: [], // 日历数据
				date: '', // 选择的日期

				// 工人月记工记账统计
				month: '',
				monthRecordNum: 0,
				monthRecordMoney: 0,
				monthBillMoney: 0,

				// 锁定
				is_lock: 0,

				// 对比
				is_compare: 0,

				/**
				 * 编辑弹窗
				 */
				formShow: false,
				// 工种
				kindshow: false,
				kindList: [],
				kindObj: {
					label: '',
					value: '',
				},
				// 上传图片
				isUpload: false, //是否打开上传图片
				avatarUrl: '',
				avatarId: '',

				// 表单
				formData: {},
				unit: '工',
				projectDetail: {
					name: '',
				}
			}
		},
		onLoad(option) {
			// uni.showLoading({
			// 	title: '加载中'
			// });
			this.id = option.id;
		},
		onShow() {
			var _this = this;
			_this.getWorkerDetail();
			_this.getWorkerStatistics();
			_this.getWorkerCompare();
			_this.getProjectDetail();
		},
		onReady() {
			var _this = this;
			_this.repairData();
			_this.getKindList();
		},
		onShareAppMessage() {
			return {
				title: this.userInfo.name + '工人详情',
				path: '/pages/worker/workerDetail/workerDetail?id=' + this.id,
				imageUrl: '/static/sharePic.jpg',
			}
		},
		methods: {
			// 获取工地详情
			getProjectDetail() {
				var _this = this;
				_this.$u.get('/api/project.member/projectDetail', {
					member_id: _this.id,
				}).then(res => {
					uni.hideLoading();
					console.log("==获取工地详情==");
					console.log(res);
					_this.projectDetail = res.data;


				}).catch(res => {
					console.log(res);
				})
			},

			// 获取工人详情
			getWorkerDetail() {
				var _this = this;
				_this.$u.get('/api/project.member/getDetail', {
					id: _this.id
				}).then(res => {
					uni.hideLoading();
					console.log("==获取工人详情==");
					console.log(res);
					var workerDetail = res.data;
					_this.workerDetail = workerDetail;
					_this.userInfo = workerDetail.userInfo;

					// 工种
					_this.kindObj.label = workerDetail.work_class;

					// 头像
					_this.avatarUrl = workerDetail.userInfo.header_img;
					_this.avatarId = workerDetail.userInfo.header_id;
				}).catch(res => {
					console.log(res);
				})
			},

			/**
			 * 日历 start
			 */
			// 获取日历组件的年
			getYear(value) {
				// console.log("获取日历组件的年：" + value)
				this.currentYear = value;
			},

			// 获取日历组件的月
			getMonth(value) {
				// console.log("获取日历组件的月：" + value)
				this.currentMonth = value;
			},

			// 获取日历组件的日
			getDay(value) {
				// console.log("获取日历组件的日：" + value)
				this.currentDay = value;
			},

			// 获取日历组件的模式
			getWeekMode(value) {
				// console.log("获取日历组件的模式：" + value)
				this.weekMode = value;
			},

			/**
			 * 日历 end
			 */

			// 获取工人统计数据
			getWorkerStatistics() {
				var _this = this;

				console.log("获取日历组件的年：" + _this.currentYear)
				console.log("获取日历组件的月：" + _this.currentMonth)
				console.log("获取日历组件的日：" + _this.currentDay)
				console.log("获取日历组件的模式：" + _this.weekMode)

				var month = '';
				if (_this.currentYear) {
					month = _this.currentYear + '-' + _this.currentMonth;
					// console.log("获取日历组件的年月：" + month)
				}
				_this.$u.get('/api/project.monthdata/memberProjectMonth', {
					project_id: _this.defaultWorksite.project_id,
					member_id: _this.id,
					month: month,
				}).then(res => {
					uni.hideLoading();
					console.log("==获取工人统计数据==");
					console.log(res);
					// 工资统计
					_this.memberInfo = res.data.memberInfo;

					// 记工数据
					_this.dotList = res.data.monthData.data_list;

					// 工人月记工记账统计
					_this.month = res.data.monthData.month;
					_this.monthRecordNum = res.data.monthData.month_num;
					_this.monthRecordMoney = res.data.monthData.month_money;
					_this.monthBillMoney = res.data.monthData.month_borrow;

					// 锁定
					_this.is_lock = res.data.monthData.is_lock;

					_this.unit = res.extend.unit == "时" ? "小时" : '工';

					// 更新日历组件数据
					_this.$nextTick(() => {
						var date = new Date(); // 获取现在时间
						var nowYear = date.getFullYear() // 现在年份
						var nowMonth = date.getMonth() + 1; // 现在月份
						var nowDate = date.getDate() // 现在日期
						if (_this.currentYear) {
							if (_this.currentYear == nowYear && _this.currentMonth == nowMonth && _this
								.currentDay == nowDate) {
								_this.$refs.calendar.initDate();
							} else {
								if (_this.weekMode) {
									const d = new Date(_this.currentYear, _this.currentMonth - 1, _this
										.currentDay);
									_this.$refs.calendar.initDate(d);
								} else {
									const d = new Date(_this.currentYear, _this.currentMonth - 1, 1);
									_this.$refs.calendar.initDate(d);
								}
							}
						} else {
							_this.$refs.calendar.initDate();
						}
					})
				}).catch(res => {
					console.log(res);
				})
			},

			// 修复数据
			repairData() {
				var _this = this;

				var month = '';
				if (_this.currentYear) {
					month = _this.currentYear + '-' + _this.currentMonth;
					// console.log("获取日历组件的年月：" + month)
				}
				_this.$u.get('/api/project.repairdata/repairMemberData', {
					member_id: _this.id,
					month: month,
				}).then(res => {
					uni.hideLoading();
					console.log("==获取工人详情数据对比==");
					console.log(res);
					_this.is_compare = res.data;
				}).catch(res => {
					console.log(res);
				})
			},


			// 获取工人详情数据对比
			getWorkerCompare() {
				var _this = this;
				var month = '';
				if (_this.currentYear) {
					month = _this.currentYear + '-' + _this.currentMonth;
					// console.log("获取日历组件的年月：" + month)
				}

				//走一下数据修复
				_this.repairData();

				_this.$u.get('/api/project.compare/checkMember', {
					member_id: _this.id,
					month: month,
				}).then(res => {
					uni.hideLoading();
					console.log("==获取工人详情数据对比==");
					console.log(res);
					_this.is_compare = res.data;
				}).catch(res => {
					console.log(res);
				})
			},

			// 锁定
			lockClick() {
				var _this = this;
				var month = '';
				if (_this.currentYear) {
					month = _this.currentYear + '-' + _this.currentMonth;
					console.log("获取日历组件的年月：" + month)
				}
				uni.showModal({
					title: '提示',
					content: '是否确认锁定？',
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							_this.$u.post('/api/project.monthdata/memberDataLock', {
								member_id: _this.id,
								month: month,
							}).then(res => {
								console.log("==锁定==");
								console.log(res);
								uni.showToast({
									title: res.msg,
									duration: 2000
								});
								setTimeout(function() {
									_this.getWorkerDetail();
								}, 2000)
							}).catch(res => {
								console.log(res);
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			// 异常
			errorMore() {
				uni.navigateTo({
					url: '../workerDataError/workerDataError?id=' + this.id
				})
			},

			// 获取工种列表
			getKindList() {
				var _this = this;
				_this.$u.get('/api/project.job/getTree', {}).then(res => {
					uni.hideLoading();
					console.log("==获取工种列表==");
					console.log(res);
					_this.kindList = res.data;
				}).catch(res => {
					console.log(res);
				})
			},

			// 选择工种
			kindConfirm(e) {
				console.log("==选择工种==");
				console.log(e);
				this.kindObj = e[1];
				this.kindshow = false;
			},

			/**
			 * 上传图片 start
			 */
			// 打开上传图片
			openUpload() {
				this.isUpload = true;
			},

			// 编辑工人信息
			editClick() {
				if (this.memberInfo.is_edit) {
					this.formShow = true
				}
			},

			/**
			 * 上传图片 start
			 */
			// 打开上传图片
			openUpload() {
				this.isUpload = true;
			},

			// 获取上传的图片
			getImgsFunc(e) {
				console.log("==获取上传的图片==");
				console.log(e);
				let _this = this;
				if (e && typeof(e) != 'undefined') {
					_this.avatarUrl = e[0].url;
					_this.avatarId = e[0].imgID;
				}
				_this.isUpload = false;
			},
			/**
			 * 上传图片 end
			 */

			// 提交
			formSubmit(e) {
				// console.log(e);
				var _this = this;
				var formData = e.detail.value;

				if (!formData.name) {
					uni.showModal({
						content: '姓名不能为空',
						showCancel: false,
					})
					return;
				}

				if (!_this.kindObj.label) {
					uni.showModal({
						content: '请选择工种',
						showCancel: false,
					})
					return;
				}

				if (!formData.mobile) {
					uni.showModal({
						content: '电话不能为空',
						showCancel: false,
					})
					return;
				} else {
					var testMobile = _this.$u.test.mobile(formData.mobile);
					// console.log(testMobile)
					if (testMobile == false) {
						uni.showModal({
							content: '你输入的电话格式不正确',
							showCancel: false,
						})
						return;
					}
				}

				// if (!_this.avatarId) {
				// 	uni.showModal({
				// 		content: '请上传头像',
				// 		showCancel: false,
				// 	})
				// 	return;
				// }

				_this.formData = formData;
				_this.$u.throttle(_this.submitForm, 3000);
			},

			// 提交接口
			submitForm() {
				var _this = this;

				_this.$u.post('/api/project.member/add_do', {
					id: _this.workerDetail.id,
					project_id: _this.defaultWorksite.project_id,
					work_class: _this.kindObj.label,
					name: _this.formData.name,
					mobile: _this.formData.mobile,
					img: _this.avatarId,
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: res.msg,
						duration: 2000
					});
					setTimeout(function() {
						_this.formShow = false;
						_this.getWorkerDetail();
					}, 2000)
				}).catch(res => {
					console.log(res);
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.workerInfor_box {
		padding: 30rpx;
	}

	.workerInfor_con {
		// display: flex;
		// justify-content: space-between;
		// align-items: center;
	}

	.workerInfor {
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.workerAvatar {
		width: 90rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 24rpx;
		color: $uni-color-white;
		border-radius: 10rpx;
		background: $uni-color-active;
		overflow: hidden;
	}

	.workerName {
		flex: 2;
		font-size: 32rpx;
		font-weight: bold;
		color: #000;
		margin: 0 20rpx;
	}

	.workerWorksite {
		padding-top: 20rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
	}

	.worksiteName {
		font-size: 28rpx;
		color: #999;
		margin-right: 20rpx;
	}

	.worksiteName text {
		padding: 0 10rpx;
	}

	// 日历
	.calendarBox {
		padding: 30rpx 0;
	}

	// 工地信息
	.worksiteInfo_con {
		width: 100%;
		height: 224rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		overflow: hidden;
		margin-top: 30rpx;
	}

	.statisticsCon {
		overflow: hidden;
		margin-top: 20rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.statisticsItem {
		flex: 1;
	}

	.statisticsMoney {
		font-size: 30rpx;
		color: #fff;
	}

	.statisticsDesc {
		font-size: 24rpx;
		color: #BCDEFD;
		margin-top: 10rpx;
	}

	// 记工记账
	.recordList_box {
		position: relative;
	}

	.recordTit_con {
		padding: 30rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: $uni-color;
		background-color: #f5f5f5;
	}

	.recordList_con {
		padding: 0 30rpx;
		overflow: hidden;
	}

	.recordItem {
		padding: 30rpx 0;
		border-bottom: 2rpx solid #eee;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.recordDay {
		flex: 2;
		font-size: 28rpx;
		font-weight: bold;
		text-align: center;
		margin-left: 20rpx;
	}

	.recordMoney {
		width: 200rpx;
		font-size: 28rpx;
		color: #8B8A90;
		text-align: right;
	}

	.blue {
		color: $uni-color-active;
	}

	.warn {
		color: #FFC30B;
	}

	.checkStamp {
		width: 282rpx;
		height: 282rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	// 编辑弹窗
	.form_box{
		padding: 0 30rpx;
		margin-top: 80rpx;
	}
	
	.formCon {
		padding: 0;
		box-shadow: none;
	}

	.pickerCon {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/* 默认工地 */
	.worksiteBox {
		width: 690rpx;
		margin: 30rpx auto;
		overflow: hidden;
		background: #fff;
		border-radius: 30rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
	}

	.worksiteWrap {
		border-radius: 30rpx;
		overflow: hidden;
	}

	.worksiteStatistics_con {
		padding: 30rpx 0;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.statisticsItem {
		width: 300rpx;
		overflow: hidden;
		text-align: center;
	}

	.statisticsLabel {
		font-size: 24rpx;
		color: #696A6E;
	}

	.statisticsMoney {
		font-size: 42rpx;
		color: #000000;
		margin-top: 10rpx;
	}

	.worksiteMoney_con {
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ECEDEF;
	}

	.moneyItem {
		width: 50%;
		padding: 20rpx;
		font-size: 28rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		overflow: hidden;
		text-align: center;
	}

	.moneyItem image {
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
		margin: -2rpx 10rpx 0 0;
	}
</style>
